<template>
    <el-container>
        <el-card shadow="hover" >
            <div style=""> 电脑 {{fatherParam.ip}} <el-button @click="Test()">重新连接</el-button> <el-button @click="Reboot(fatherParam.ip)">重启电脑</el-button></div>
            <div style="overflow: auto;"><marquee behavior="alternate" width="300" height="20" direction="left" v-if="!SocketSuc">无信号</marquee> </div>
            <div id="cpt">
                <img :src="Imgurl" v-if="SocketSuc">
                <img :src="Nosignal" v-if="!SocketSuc">
            </div>
        </el-card>
    </el-container>
</template>

<script>
import { masters,rebootApi } from '../../api/autopay';
export default {
    name: 'ApiDetail',
    data(){
        return { 
            SocketSuc:false,
            SckErrshow : false,
            Nosignal:"/img/noSignal.gif",
            Imgurl:""
        }
    },
    props: {
        fatherParam: {},
    },
    mounted:function () {
        this.Test();
    },//mounted
    destroyed: function() {
    　　　　//页面销毁时关闭长连接
        this.websocketclose();
    },
    methods: {
        Reboot(ip){
            let par = {"ip":ip}
            var that =this;
            that.$confirm('计算机将要关闭, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(
                rebootApi(par).then(res =>{
                    let {code,data,msg} = res
                    if (code == 200){
                        that.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    }
                }).catch()
            ).catch(() => {
            that.$message({
            type: 'info',
            message: '已取消'
            });          
            });
        },
        Test(){
            var that = this;
            console.log("连接"+that.fatherParam.ip);
            that.Imgsocket = new WebSocket('ws://'+that.fatherParam.ip+':9000/v1/websockit/screen');
            that.Imgsocket.onopen = that.open
            that.Imgsocket.onerror = that.error
            that.Imgsocket.onmessage = that.getImg
            that.Imgsocket.onclose = that.websocketclose;
            setInterval(this.Send, 1000);
        },
        open: function () {
            this.SocketSuc = true;
            console.log("socket连接成功")
            // this.Send();
            this.$notify({
                title: 'socket连接成功',
                message: 'socket连接成功'
            });

        },
        error: function () {
            this.$notify({
                title: 'socket异常',
                message: '连接错误',
                type: 'warning'
            });
        },
        getImg: function (msg) {
            if (msg.data.length < 10) {
                this.Imgurl = "/img/noSignal.gif"
                return 
            }else{
                this.Imgurl  = "data:image/jpeg;base64,"+msg.data.replace(/\"/g, "");
            }
            
        },
        Send() {
            var that = this;
            if (that.SocketSuc){
                that.Imgsocket.send("img");
            }else{
                if (!that.SckErrshow ){
                    that.$notify({
                        title: 'socket异常',
                        message: 'socket未连接',
                        type: 'warning'
                    });
                    that.SckErrshow = true;
                }
                that.Imgurl = "/img/noSignal.gif"
                
            }
        },
        close: function () {
            this.Imgurl = "/img/noSignal.gif"
            this.SocketSuc = false;
            console.log("关闭socket");
            this.$notify({
                title: 'socket异常',
                message: 'socket已经关闭',
                type: 'warning'
            });
        },
        cache(){
          console.log('Cache Cleared');
        },
        alert(){
          alert('Clicked on alert icon');
        },
        websocketclose(e){  //关闭
            this.Imgurl = "/img/noSignal.gif"
            this.SocketSuc = false;
            this.$notify.error({
                title: 'socket异常',
                message: 'socket断开连接'+e,
            });
        },
        
    }
}
</script>

<style >
html {
    overflow: hidden;
}

body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    /*background: gray;*/
}

.showimg {
    /*background: white;*/
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
    /*position: absolute;*/
    /*max-width: 1000px;*/
    /*max-height: 500px;
    min-height: 300px;*/
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 3em;
    overflow: auto;
}
#cpt {
    /*background:blue;*/
    margin: 0;
    margin-top: 10px;
    /*padding: 0.5em 0.5em 0.5em 0.5em;*/
    /*position: absolute;*/
    /*position:relative;*/
    /*left:134px; top:130px;*/
    height: 500px;
    width: 630px;
    overflow: auto;
}


#cpt img{ 
    border: black solid 1px;
    width:100%;         /* ... */
    height:100%;        /* ... */
    display:block;  /* ... */
}
</style>
